src/components/onboarding/SingleSelect.tsx (1)

11-29: 선택된 값을 수집할 수 없는 구조입니다.

현재 select 요소가 value와 onChange 속성 없이 비제어 컴포넌트로 구현되어 있어, 사용자가 선택한 값을 부모 컴포넌트(Onboarding)에서 가져올 수 없습니다. 온보딩 플로우가 완료되어도 실제 폼 데이터를 수집하거나 제출할 수 없게 됩니다.

다음과 같이 제어 컴포넌트 패턴으로 수정하세요:

-const SingleSelect = ({ title }: { title: string }) => {
+interface SingleSelectProps {
+  title: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const SingleSelect = ({ title, value, onChange }: SingleSelectProps) => {
   return (
     <div className="flex flex-col gap-6">
       {/* 제목 */}
       <p className="text-[24px] font-semibold">{title} 선택하세요</p>
       {/* 단일 선택 버튼 */}
-      <select className="rounded-xl border border-gray-200 px-2 py-4 text-[20px] outline-none focus:border-gray-200">
+      <select 
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded-xl border border-gray-200 px-2 py-4 text-[20px] outline-none focus:border-gray-200"
+      >
         <option className="" value="">
           선택하세요
         </option>

src/pages/onboarding/Onboarding.tsx (1)

10-46: 온보딩 폼 데이터를 수집하고 관리하는 상태가 없습니다.

현재 구조에서는 사용자가 각 단계에서 입력한 값들(업종, 업체명, 위치, 매출, 타겟층)을 저장하거나 수집할 방법이 없습니다. handleComplete 함수는 단순히 페이지만 이동하며, 실제 온보딩 데이터는 모두 손실됩니다. 이는 온보딩 기능을 완전히 무용지물로 만드는 치명적인 문제입니다.

다음과 같이 폼 상태 관리를 추가하세요:

 const Onboarding = () => {
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState(1);
   const totalSteps = 6;
+  
+  // 폼 데이터 상태
+  const [formData, setFormData] = useState({
+    businessType: '',
+    businessName: '',
+    location: '',
+    averageRevenue: '',
+    targetRevenue: '',
+    targetAudience: [] as string[],
+  });

   const handleComplete = () => {
+    // 폼 데이터 유효성 검사
+    console.log('Submitting onboarding data:', formData);
+    // TODO: API 호출로 데이터 전송
     navigate('/chat');
   };

   const renderStepContent = () => {
     switch (currentStep) {
       case 1:
-        return <SingleSelect key="step1" title="업종을" />;
+        return (
+          <SingleSelect 
+            key="step1" 
+            title="업종을" 
+            value={formData.businessType}
+            onChange={(value) => setFormData(prev => ({ ...prev, businessType: value }))}
+          />
+        );
       case 2:
-        return <TextInput key="step2" title="업체명을" placeholder="" />;
+        return (
+          <TextInput 
+            key="step2" 
+            title="업체명을" 
+            placeholder=""
+            value={formData.businessName}
+            onChange={(value) => setFormData(prev => ({ ...prev, businessName: value }))}
+          />
+        );
       // ... 나머지 케이스도 동일하게 수정

이후 TextInput과 PriceInput 컴포넌트도 SingleSelect, MultiSelect와 같이 제어 컴포넌트 패턴으로 수정해야 합니다.